<template>
  <div class="rolelist">
    <el-button type="primary" @click="AddRole({})">添加角色 </el-button>
    <el-table
      :data="Roles"
      :border="true"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column type="expand" width="48">
        <template #default="props"> </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in Rolestitle"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <template #default="{ row }" v-if="item.prop === 'action'">
          <el-button
            type="primary"
            :icon="Edit"
            size="small"
            @click="AddRole(row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            @click="DeleteRole(row)"
            >删除</el-button
          >
          <el-button
            type="warning"
            :icon="Edit"
            size="small"
            @click="AuthlogShow(row)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Authlog
      v-model="AuthShow"
      v-if="AuthShow"
      :AuthTitle="AuthTitle"
      :AuthData="AuthData"
      @closePop="ClosePOP"
    />
    <Dialog
      v-model="dialogVisible"
      :DiaTitle="DiaTitle"
      v-if="dialogVisible"
      :EditData="EditData"
      @initRolelist="getRolelist"
    ></Dialog>
  </div>
</template>

<script lang="ts" setup>
import apis from "@/http/apis";
import { Delete, Edit } from "@element-plus/icons-vue";
import { reactive, shallowReactive, ref } from "vue";
import { isNull } from "@/utils/filter";
import { ElMessage, ElMessageBox } from "element-plus";
import Authlog from "./Components/AuthLog.vue";
import Dialog from "./Components/Dialog.vue";
import { Rolestitle } from "@/utils/userTable"; //引入表格列对象
let Roles: Idata = ref([]); //定义角色列表对象用来接收数据
//初始请求
const getRolelist = async () => {
  // console.log("执行了刷新");

  const rolelist: any = await apis.getRoleList();
  Roles.value = rolelist.data;
  // console.log(Roles.value, "====");
};

getRolelist();
const dialogVisible = ref(false); //控制添加和编辑对话框显示隐藏
const DiaTitle = ref(""); //弹出层传入标题
const EditData = ref({}); //当前编辑对象

const AuthTitle = ref(""); //分配权限弹出层标题
const AuthData = ref({}); //当前分配权限对象

const AuthShow = ref(false); //控制权限分配对话框显示隐藏
const AddRole = async (row: any) => {
  //添加角色和编辑角色处理函数

  if (isNull(row)) {
    //如果row是空值那就是添加用户操作
    DiaTitle.value = "添加角色";
    EditData.value = {}; //不传入当前对象
  } else {
    //不是空值就是编辑用户操作
    DiaTitle.value = "编辑角色";
    EditData.value = JSON.parse(JSON.stringify(row)); //将这一行的对象传到子组件弹窗中
  }
  dialogVisible.value = true;
};
//删除角色处理函数
const DeleteRole: Function = (row: Idata) => {
  ElMessageBox.confirm("您确定要删除当前角色吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      //删除请求
      await apis.DeleteRole(row.id);
      getRolelist(); //刷新数据
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

//分配角色处理函数

const AuthlogShow = (row: any) => {
  AuthTitle.value = "分配权限";
  AuthData.value = JSON.parse(JSON.stringify(row));
  AuthShow.value = true;
};
// 接收自定义事件关闭弹窗的方法
const ClosePOP = (pop: any) => {
  AuthShow.value = pop;
  getRolelist(); //刷新数据
  // console.log(AuthShow.value, "弹窗关");
};
</script>

<style lang="less" scoped></style>
